<template>
<div>
  <el-form label-position="left"  style="margin-top: 50px" label-width="0px" :rules="rules" :model="registerForm" ref="registerForm">
    <el-form-item prop="loginName">
      <el-input type="text" v-model.lazy="registerForm.loginName"
                auto-complete="off" placeholder="请输入账号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model.lazy="registerForm.password"
                auto-complete="off" placeholder="密码" @input="pushPassword"></el-input>
    </el-form-item>
    <el-form-item prop="passwordCheck">
      <el-input type="password" v-model.lazy="registerForm.passwordCheck"
                auto-complete="off" placeholder="确认密码"></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="margin-top:20px ; width: 80%;background: #505458;border: none" v-on:click.stop="nextStep('registerForm')">下一步</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import {passCheckFirstRules, passCheckRules} from '../../util/verify/rules'
import {valiDate} from '../../util/verify/valiDate'
export default {
  name: 'step1',
  data () {
    return {
      rules: passCheckFirstRules,
      registerForm: {
        loginName: '',
        password: '',
        passwordCheck: ''
      },
      loading: false
    }
  },
  methods: {
    pushPassword () {
      this.rules = passCheckRules(this.registerForm.password)
    },
    async nextStep () {
      const _this = this
      /* 执行表单验证 */
      const valid = await valiDate(_this, 'registerForm')
      if (!valid) {
        return null
      }
      const user = {
        'loginName': _this.registerForm.loginName,
        'password': _this.registerForm.password
      }
      this.$emit('user', user)
      this.$emit('steps')
    }
  }
}
</script>

<style scoped>

</style>
